import {create} from 'zustand'
import {useEffect} from "react";
// 1创建store
// 语法容易出错
// 1.函数参数必须返回一个对象 对象内部编写状态数据和方法
// 2.set是用来修改数据的专门方法必须调用它来修改数据
// 语法1：参数是函数 需要用到老数据的场景
// 语法2：参数直接是一个对象

const useStore = create((set)=>{
    return {
        // 状态数据
        count:0,
        // 修改状态数据的方法
        inc:()=>{
            set((state)=>({count:state.count +1})) //语法1
            //({count:100}) //语法2
        },
        channelList:[],
        fetchGetList:async ()=>{
            const res = await fetch('https://api.oioweb.cn/api/common/history')
            const jsonRes = await res.json()
            // console.log('--------',jsonRes.result)
            set({
                channelList:jsonRes.result
            })
        }
    }
})
// store 切片 可以理解为拆分
const createCounterStore = (set) => {
    return {
        count:0,
        // 修改状态数据的方法
        inc:()=>{
            set((state)=>({count:state.count +1})) //语法1
            //({count:100}) //语法2
        },
    }
}
const createChannelStore = (set)=>{
    return {
        channelList:[],
        fetchGetList:async ()=>{
            const res = await fetch('https://api.oioweb.cn/api/common/history')
            const jsonRes = await res.json()
            // console.log('--------',jsonRes.result)
            set({
                channelList:jsonRes.result
            })
        }
    }
}
// 拆分后的store进行整合
const plusStore = create((...a)=>{
    return {
        ...createCounterStore(...a),
        ...createChannelStore(...a)
    }
})

const Status = () => {
    // const {count,inc,fetchGetList,channelList} = useStore()
    const {count,inc,fetchGetList,channelList} = plusStore() //store整合后使用
    useEffect(()=>{
        fetchGetList()
    },[fetchGetList])
    return (
        <div>
            {count}
            <button onClick={inc}>点击</button>
            <ul style={{height:'200px',overflowX:"auto"}}>
                {
                    channelList.map(item=><li>
                        <p>{item.title}</p>
                        <p>{item.year}</p>
                    </li>)
                }
            </ul>
        </div>
    )
}

export default Status
